$(document).ready(function(){
	var search_box = $("#search_box"), 
		defaultVal = "请输入照片描述关键字";
	wrapper = $("#wrapper");

	renderContent(imgs);//渲染页面
	
	//去除IE下点击产生的虚线边框
	$("a").live("focus", function(){$(this).blur();});

	//搜索框水印
	if("placeholder" in document.createElement("input")){//支持html5元素的浏览器使用placeholder
		search_box.attr("placeholder", defaultVal);
	}
	else{//不支持html5的浏览器水印由js生成
		search_box.val(defaultVal).addClass("waterMark")
		.focus(function(){
			if($(this).val() === defaultVal) $(this).val("").removeClass("waterMark");
		})
		.blur(function(){
			if($(this).val() === "") $(this).val(defaultVal).addClass("waterMark");
		});
	}

	//按回车键搜索
	search_box.keydown(function(e){
		if(e.keyCode === 13){//回车键开始搜索
			doSearch($(this).val());
		}
	});

	//搜索按钮搜索
	$("#search_submit").click(function(){
		doSearch(search_box.val());
	});
	
	//绑定滚轮事件，为瀑布做准备
	win.bind("scroll", function(){scrollHandler(imgs);});

	//图片鼠标move时加滤镜
	$(".img_cover").live("mouseover", function(){
		var counter = 1, t = $(this);
			setTimeout(function(){
				t.css("opacity", 0.01 * counter++);
				if(t.css("opacity") < 0.2) setTimeout(arguments.callee, 10);
			}, 10);
	}).live("mouseout", function(){
		var counter = 1, t = $(this);
		setTimeout(function(){
			t.css("opacity", 0.2 - 0.05 * counter++);
			if(t.css("opacity") > 0) setTimeout(arguments.callee, 50);
		}, 50);
	});
});

/*
* @source 要加载的图片索引集合
*/
function renderContent(source){
	wrapper.empty();
	if(win.scrollTop() === 0) {
		$("#goToTop").hide();
	}
	if(source.length === 0 || !source) {
		error("没有查询结果");
		return false;
	}

	var uls = [],
		row = 0,
		isFinished = false;//是否已经没有数据可查
	while(row < picNum && !isFinished){
		for(var i = 0; i < max; i++){//列
			var r = getUniqueIndex(source);
			if(r === false){//没有数据停止搜索
				isFinished = true;
				break;
			}
			if(!uls[i]) uls[i] = $("<ul>").addClass("column");
			wrapper.append(uls[i].append(createListItem(source[r], function(){
				var that = $(this);
				that.parents("li").find(".img_size").html(that.width() + "x" + that.height());
			})));
		}
		row++;
	}

	wrapper.width(max * 248);
	return true;
}

/*
* @source 要加载的图片索引集合
*/
function scrollHandler(source){
	var uls = wrapper.find("ul"), 
		h = win.height() + win.scrollTop();

	//回到顶部按钮的控制
	win.scrollTop() > 0 ?	$("#goToTop").show() : $("#goToTop").hide();

	for(var i = 0; i < max; i++){
		var cur_ul = uls.eq(i);
		if(cur_ul.height() + $("#baiduTitle").height() <= h){
			var r = getUniqueIndex(source);
			if(r === false){
				break;
			}
			cur_ul.append(createListItem(source[r], function(){
				var that = $(this), li = that.parents("li");
				li.fadeIn(1500, function(){
					li.find(".img_size").html(that.width() + "x" + that.height());
				});
			}, true));
		}
	}
}

function doSearch(keyword){
	usedImg = [];
	window.scrollTo(0,0);
	$("#error").hide();
	win.unbind("scroll");

	keyword = $.trim(keyword);
	if(keyword === ""){//没有关键词则查询全部图片
		renderContent(imgs);
		win.bind("scroll", function(){scrollHandler(imgs);});
		return false;
	}
	var reg = new RegExp(keyword), len = imgs.length, result = [];
	for(var i = 0; i < len; i++){//把收集查询结婚
		if(reg.test(imgs[i].description))
			result.push(imgs[i]);
	}

	if(renderContent(result)) {//页面渲染成功加载滚动事件
		win.bind("scroll", function(){scrollHandler(result);});
	}
}

/*
* @pic 要加载的图片对象
* @fn  图片加载完毕后要执行的函数
* @isHidden li加载完毕后是否要隐藏
*/
function createListItem(pic, fn, isHidden){
	var img = new Image();
	img.src = pic.url;
	if($.browser.msie){//等待图片加载完毕，IE和非IE不一样处理
		var timer = setInterval(function(){
			if(img.readyState == "complete"){
				clearInterval(timer);
				fn.call(img);
			}
		}, 100);
	}
	else{
		$(img).load(function(){
			fn.call(this);
		});
	}
	var li = $("<li>");
	if(isHidden) li.addClass("hide");//滚轮事件加载的图片先隐藏再淡入
	return li.append($("<div>").addClass("list_item")
		.append($("<div>").addClass("d_img")
			.append($("<div>").addClass("img_wrapper")
				.append(img)
				.append($("<a>",{"href":pic.url,"class":"img_cover"})))
			.append($("<div>").addClass("d_info")
			.append($("<div>").addClass("img_info")
				.append($("<a>",{"href":"#"}).html(pic.description))
				.append($("<div>")
					.append($("<div>").addClass("div_from")
						.append($("<span>").addClass("src_from").html("来自&nbsp;"))
						.append($("<a>",{"href":pic.url}).append(pic.url)))
					.append($("<div>").addClass("img_size")))))));
}

//获取唯一的图片序号
function getUniqueIndex(source) {
	if(!source || source.length === 0) return false;
	
	var imgs_len = source.length, len = usedImg.length;
	if(imgs_len === len) return false;

	var	r = Math.floor(Math.random() * imgs_len);
	for(var i = 0; i < len; i++){
		if(usedImg[i] === r) {
			return arguments.callee(source);
			break;
		}
	}
	usedImg.push(r);
	return r;
}

function error(msg){
	$("#error").show().empty().text(msg);
}

/********全局数据和变量***********/
var	win = $(window),
 	wrapper = null,//照片存放容器
	max = Math.floor(win.width() / 248),//计算当前页面能放下几列
	picNum = 3,//第一次加载时每列要加载的照片数
	usedImg = [],//存放已经使用过的照片索引
	imgs = [
	{"url":"image/source/1.jpg", "description":"校花"},
	{"url":"image/source/2.jpg", "description":"美女"},
	{"url":"image/source/3.jpg", "description":"艺术照"},
	{"url":"image/source/4.jpg", "description":"吃货"},
	{"url":"image/source/5.jpg", "description":"奔放"},
	{"url":"image/source/6.jpg", "description":"美图"},
	{"url":"image/source/7.jpg", "description":"自恋"},
	{"url":"image/source/8.jpg", "description":"纪念逝去的青春"},
	{"url":"image/source/9.jpg", "description":"高贵气质"},
	{"url":"image/source/10.jpg", "description":"古典美"},
	{"url":"image/source/11.jpg", "description":"足球宝贝"},
	{"url":"image/source/12.jpg", "description":"妩媚"},
	{"url":"image/source/13.jpg", "description":"清纯民国"},
	{"url":"image/source/14.jpg", "description":"宅女民国"},
	{"url":"image/source/15.jpg", "description":"自拍"},
	{"url":"image/source/16.jpg", "description":"夏天的浪漫"},
	{"url":"image/source/17.jpg", "description":"日系漫画"},
	{"url":"image/source/18.jpg", "description":"民国风"},
	{"url":"image/source/19.jpg", "description":"美不胜收的果实"},
	{"url":"image/source/20.jpg", "description":"古典美女赏析"},
	{"url":"image/source/21.jpg", "description":"宠物和美女"},
	{"url":"image/source/22.jpg", "description":"清纯与甜美"},
	{"url":"image/source/23.jpg", "description":"自拍、清纯"},
	{"url":"image/source/24.jpg", "description":"短裙性感美女"},
	{"url":"image/source/25.jpg", "description":"婚礼婚纱"},
	{"url":"image/source/26.jpg", "description":"结婚照美女"},
	{"url":"image/source/27.jpg", "description":"结婚照美女"},
	{"url":"image/source/28.jpg", "description":"结婚照美女"},
	{"url":"image/source/29.jpg", "description":"结婚照美女"},
	{"url":"image/source/30.jpg", "description":"结婚照美女"},
	{"url":"image/source/31.jpg", "description":"结婚照美女"},
	{"url":"image/source/32.jpg", "description":"结婚照美女"},
	{"url":"image/source/33.jpg", "description":"结婚照美女"},
	{"url":"image/source/34.jpg", "description":"结婚照美女"},
	{"url":"image/source/35.jpg", "description":"结婚照美女"},
	{"url":"image/source/36.jpg", "description":"结婚照美女"},
	{"url":"image/source/37.jpg", "description":"结婚照美女"},
	{"url":"image/source/38.jpg", "description":"结婚照美女"},
	{"url":"image/source/39.jpg", "description":"结婚照美女"},
	{"url":"image/source/40.jpg", "description":"结婚照美女"},
	{"url":"image/source/41.jpg", "description":"结婚照美女"},
	{"url":"image/source/42.jpg", "description":"结婚照美女"},
	{"url":"image/source/43.jpg", "description":"结婚照美女"},
	{"url":"image/source/44.jpg", "description":"结婚照"},
	{"url":"image/source/45.jpg", "description":"结婚照"},
	{"url":"image/source/46.jpg", "description":"结婚照"},
	{"url":"image/source/47.jpg", "description":"结婚照"},
	{"url":"image/source/48.jpg", "description":"结婚照"},
	{"url":"image/source/49.jpg", "description":"结婚照"},
	{"url":"image/source/50.jpg", "description":"结婚照"},
	{"url":"image/source/51.jpg", "description":"结婚照"},
	{"url":"image/source/52.jpg", "description":"结婚照"},
	{"url":"image/source/53.jpg", "description":"结婚照"},
	{"url":"image/source/54.jpg", "description":"结婚照"},
	{"url":"image/source/56.jpg", "description":"结婚照"},
	{"url":"image/source/57.jpg", "description":"结婚照"},
	{"url":"image/source/58.jpg", "description":"结婚照"},
	{"url":"image/source/59.jpg", "description":"结婚照"},
	{"url":"image/source/60.jpg", "description":"结婚照"},
	{"url":"image/source/61.jpg", "description":"结婚照"},
	{"url":"image/source/62.jpg", "description":"结婚照"},
	{"url":"image/source/63.jpg", "description":"结婚照"},
	{"url":"image/source/64.jpg", "description":"结婚照"},
	{"url":"image/source/65.jpg", "description":"结婚照"},
	{"url":"image/source/66.jpg", "description":"结婚照"},
	{"url":"image/source/67.jpg", "description":"结婚照"}
];